<template>
    <div class="dai">
        <div class="cont">
            <div class="abb">
                <h1>仓库信息</h1>
                <div class="nmb">
                    <div class="nmbs">
                        输入仓库ID:<el-input v-model="filters.id" clearable @change="loadwarehouses"></el-input>
                    </div>
                    <div class="nmbs">
                        选择该仓库类型:<el-select v-model="filters.cangkuname" clearable @change="loadwarehouses">
                            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="nmbs">
                        选择该日期:<el-input v-model="filters.createTime" type="date" clearable
                            @change="loadwarehouses"></el-input>
                        <el-button @click="resfrom">重置</el-button>
                    </div>
                </div>
            </div>
            <div class="a">
                <el-col>
                    <el-button :icon="CirclePlus" @click="insert">添加</el-button>
                </el-col>
            </div>
            <div>
                <el-table :data="tabos" border>
                    <el-table-column label="仓库ID" prop="id"></el-table-column>
                    <el-table-column label="仓库名称" prop="warehousename"></el-table-column>
                    <el-table-column label="仓库类型" prop="cangkuname"></el-table-column>
                    <el-table-column label="仓库主管" prop="zhuguan"></el-table-column>
                    <el-table-column label="主管电话" prop="phone"></el-table-column>
                    <el-table-column label="商品地址" prop="address"></el-table-column>
                    <el-table-column label="是否启用" prop="xunze">
                        <template #default="scope">
                            {{ scope.row.xunze ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    <el-table-column label="更新时间" prop="updateTime"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div class="caozuo">
                                <el-button :icon="CirclePlus" @click="update(scope.row.id)">修改</el-button>
                                <el-button type="danger" @click="shanchu(scope.row.id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
    </div>

    <el-dialog v-model="insertVisible">
        <router-view @closeDialog="closeDialog">
        </router-view>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import request from '@/api/request';
import { useRouter } from "vue-router";
import { data } from 'jquery';


const insertVisible = ref(false)

const router = useRouter();

function insert() {
    insertVisible.value = true
    router.push("/warehouse/information/insert");
}
function update(id) {
    insertVisible.value = true
    router.push(`/warehouse/information/update?id=${id}`);
}

const filters = ref({ id: '', type: '', date: '' });

const warehoseList = ref([]);
const types = ref([
    { value: "成品仓库", label: "成品仓库" },
    { value: "原材料仓库", label: "原材料仓库" },
]);
const loadwarehouses = () => {
    request({
        method: "get",
        url: "warehouse/tree"
    }).then(res => {
        console.log(res.data);
        if (res.data) {
            warehoseList.value = res.data.map(item => ({
                id: item.warehouseId,
                warehousename: item.warehouseName,
                cangkuname: item.warehouseType,
                zhuguan: item.managerId,
                phone: item.managerPhone,
                address: item.address,
                xunze: item.isEnabled,
                createTime: new Date(item.createTime).toLocaleDateString(),
                updateTime: new Date(item.updateTime).toLocaleDateString()
            }));
        } else {
            console.error("查询失败:", res.message);
            ElMessage.error("查询失败:", +res.message)
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error("加载失败:", err.message)
    });
};
onMounted(loadwarehouses);
const tabos = computed(() => {
    return warehoseList.value.filter(item => {
        const matchId = filters.value.id ? item.id.includes(filters.value.id) : true;
        const matchcangkuname = filters.value.cangkuname ? item.cangkuname === filters.value.cangkuname : true;
        const matchdate = filters.value.createTime ? item.createTime === new Date(filters.value.createTime).toLocaleDateString() : true;
        return matchId && matchcangkuname && matchdate;
    });
});

const resfrom = () => {
    filters.value = { id: "", cangkuname: "", createTime: "" }
    loadwarehouses();
};

const shanchu = (id) => {
    console.log("要删除的仓库id", id)
    ElMessageBox.confirm("确定删除该仓库", {
        title: '删除确定',
        confirmButtonText: '确定删除',
        cancelButtonText: '取消'
    })
        .then(() => {
            request({
                method: "delete",
                url: `/warehouse/${id}`,
            })
                .then(res => {
                    if (res.data.success) {
                        ElMessage.success("删除成功");
                        loadwarehouses();
                    } else {
                        console.error('删除失败:', res.message)
                        ElMessage.error(`删除失败:${res.message}`);
                    }
                })
                .catch(err => {
                    console.error('删除异常:', err);
                    ElMessage.error(`删除失败:${err.message || '网络异常'}`)
                })
        })
        .catch(() => {
            ElMessage.info("已取消")
        });
};

let closeDialog = () => {
    insertVisible.value = false
    loadwarehouses();
    router.push('/warehouse');
}
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}

.nmb span {
    width: 100px;
    text-align: right;
}

.filter-input {
    flex: 1;
    min-width: 180px;
}


.reset-btn {
    margin-left: 10px;
    white-space: nowrap;
}

.a {
    margin-bottom: 20px;
}
</style>
